<script setup lang="ts">
import * as echarts from 'echarts';
import {computed, onMounted, reactive, ref} from "vue";
import {getAssetsFile} from "@/utils/tools.ts";
import {getStatistic} from "@/api/statisticController.ts";
import Ranking from "@/views/welcome/ranking.vue";
import {useWindowSize} from "@vueuse/core";

const pieCharts = ref(null)
const inited = ref(false)

const { width } = useWindowSize()
const isPhone = computed(() => {
  return width.value < 768
})

const countStatistic = reactive([
  {
    icon: getAssetsFile('statistic/invoice.svg'),
    label: '发票总数',
    count: 0,
    suffix: '张'
  },
  {
    icon: getAssetsFile('statistic/money.svg'),
    label: '发票总额',
    count: 0,
    suffix: '元'
  },
  {
    icon: getAssetsFile('statistic/invoice.svg'),
    label: '已开票数量',
    count: 0,
    suffix: '张'
  },
  {
    icon: getAssetsFile('statistic/invoice.svg'),
    label: '未开票数量',
    count: 0,
    suffix: '张'
  }
])

const sfInvoiceCount = ref(0)
const hfInvoiceCount = ref(0)

const invoiceCountRank = reactive([])
const invoiceAmountRank = reactive([])

const userCount = ref(0)
const templateCount = ref(0)

const dataInit = async () => {
  await getStatistic().then(res => {
    countStatistic[0].count = res.totalInvoiceCount
    countStatistic[1].count = res.totalInvoiceAmount
    countStatistic[2].count = res.totalInvoiceAmountOpened
    countStatistic[3].count = res.totalInvoiceAmountUnopened
    sfInvoiceCount.value = res.sfInvoiceCount
    hfInvoiceCount.value = res.hfInvoiceCount
    invoiceCountRank.push(...res.invoiceCountRanking)
    invoiceAmountRank.push(...res.invoiceAmountRanking)
    userCount.value = res.userCount
    templateCount.value = res.templateCount

    inited.value = true
  })
}

const pieChartsInit = () => {
  const charts = echarts.init(pieCharts.value);
  charts.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      right: '10px',
      orient: 'vertical',
    },
    series: [
      {
        name: '开票数量',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          normal: {
            show: true,
            position: 'inner', // 数值显示在内部
            formatter: '{c}张  {d}%', // 格式化数值百分比输出
          },
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'normal'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {value: sfInvoiceCount.value, name: '顺丰'},
          {value: hfInvoiceCount.value, name: '合丰'}
        ]
      }
    ]
  })
}

onMounted(async () => {
  await dataInit()

  pieChartsInit()
})
</script>

<template>
  <div class="statistic-main" :class="{phone: isPhone}">
    <a-row :gutter="24">
      <a-col :span="isPhone ? 24 : 18">
        <div class="total-statistic card">
          <div class="card-title">数据总览</div>
          <a-row :gutter="24">
            <a-col :span="isPhone ? 12 : 6" class="statistic-count" v-for="item in countStatistic">
              <div class="count-label">{{ item.label }}</div>
              <div class="count-num">
                <a-statistic :value="item.count" show-group-separator animation>
                  <template #prefix>
                    <!--                    <img class="count-icon" :src="item.icon" alt="">-->
                  </template>
                  <template #suffix>
                    <span v-if="item.suffix" style="margin-left: 6px;">{{ item.suffix }}</span>
                  </template>
                </a-statistic>
              </div>
            </a-col>
          </a-row>
          <a-row style="margin-top: 20px;" :gutter="24">
            <a-col :span="isPhone ? 24 : 12">
              <div class="card-title">开票数量客户排行榜</div>
              <div>
                <ranking :rank="invoiceCountRank"></ranking>
              </div>
            </a-col>
            <a-col :span="isPhone ? 24 : 12">
              <div class="card-title">开票数量客户排行榜</div>
              <div>
                <ranking :rank="invoiceAmountRank" type="amount"></ranking>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
      <a-col :span="isPhone ? 24 : 6">
        <div class="card" style="height: 200px;">
          <div class="card-title">开票卖家分布</div>
          <a-skeleton v-if="!inited" style="padding: 20px;" >
            <a-skeleton-shape></a-skeleton-shape>
          </a-skeleton>
          <div class="pie-charts" ref="pieCharts"></div>
        </div>
        <div class="card" style="margin-top: 24px;">
          <div class="card-title">用户 | 模板</div>
          <div class="count-wrapper">
            <div class="user-count">
              <div class="user-count-label">用户</div>
              <a-statistic :value="userCount" animation>
                <template #suffix>个</template>
              </a-statistic>
            </div>
            <div class="user-count">
              <div class="user-count-label">模板</div>
              <a-statistic :value="templateCount" animation>
                <template #suffix>个</template>
              </a-statistic>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
<!--    <a-row :gutter="24" style="margin-top: 24px;">-->
<!--      <a-col :span="12">-->
<!--        <div class="card">-->
<!--          <div class="card-title">本月开票</div>-->
<!--        </div>-->
<!--      </a-col>-->
<!--    </a-row>-->
  </div>
</template>

<style scoped lang="scss">
.statistic-main {
  background-color: #f2f3f5;

  .card {
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
    padding: 20px;

    .card-title {
      font-size: 16px;
      font-weight: bold;
    }
  }

  &.phone {
    .total-statistic {
      height: initial;
    }
  }

  .total-statistic {
    height: 380px;

    .statistic-count {
      margin-top: 20px;

      .count-label {
        font-size: 14px;
      }

      .count-icon {
        width: 35px;
        height: 35px;
        margin-top: 10px;
        margin-right: 10px;
      }
    }


  }

  .count-wrapper {
    display: flex;

    .user-count {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 50%;
      height: 98px;

      &:first-child {
        border-right: 1px solid var(--color-border);
      }
    }
  }

  .pie-charts {
    width: 100%;
    height: 100%;
  }
}
</style>
